<template>
  <!--整体布局-->
  <div class="w-h-100">
    <!--最外面的大盒子--标签el-row(分成一行，一行里有24块）-->
    <el-row class="w-h-100">
      <!--左侧侧边栏-->
      <el-col :span="4" class="left-box">
        <!--可以在这里丰富左侧导航栏内容-->
        <LeftNav ref="leftNav"  :topValue="topOfLeaf"/>
      </el-col>
      <!--右侧模块-->
      <el-col :span="20" style="height: 100%;width: calc( 100% - 250px);">
        <!--顶部-->
        <el-row class="top-box">
          <!--可以在这里丰富顶部内容-->
          <TopNav :tagValue="tagValue" ref="topNav"></TopNav>
        </el-row>
        <!--二级路由展示-->
        <el-row style="height: calc( 100% - 100px);">
          <router-view></router-view>
        </el-row>
      </el-col>
    </el-row>
  </div>
</template>

<script>
//引入组件
import LeftNav from "@/views/home/component/LeftNav.vue";
import TopNav from "@/views/home/component/TopNav.vue";
import Login from "@/components/Login.vue";

export default {
  name: 'index',
  data() {
    return {
      topOfLeaf: '',//接收顶部传参的中转变量
      tagValue: '',//
    }
  },
  //注入组件
  components: {LeftNav, TopNav},
  methods: {},
  //挂在完成时候的钩子函数，指定到指定的二级路由
  mounted() {
    this.$router.push({path:"/home/index"})
    console.log("首页挂载完成。。。")
    //创建回调函数，用于子组件传参给父组件
    // this.$refs.leftNav=VueComponent
    // const  vm=this.$refs.leftNav=VueComponent
    // const  vm=this.$refs.leftNav
    this.$refs.leftNav.$on("tagClick", (menuObj) => {
      this.tagValue = menuObj
      console.log("父组件接受到了左侧导航栏子组件的参数：", menuObj)
    })
    //$on绑定事件(事件名，回调函数实参)
    //$refs--对象--属性为：标记为ref的组件，都会到这里来
    this.$refs.topNav.$on("topOfParent", (obj) => {
      //用变量存储起来
      this.topOfLeaf=obj
      console.log("父组件接收到了TopNav传来的参数tag即obj",obj)
    })

    //1、在父组件通过ref标记需要绑定事件的子组件
    //全局事件总线集中绑定

  },
  beforeDestroy() {
    //全局事件总线集中绑定
    this.$bus.$off("test")
  }
}
</script>

<style scoped>
.top-box {
  height: 80px;
  width: 100%;
}

.left-box {
  height: 100%;
  width: 250px;
}
</style>